<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="sysNewsForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="token" v-model="item.token"/>
          <input type="hidden" name="newFlag" v-model="newFlag"/>
          <input type="hidden" name="type" value="7">
          <input type="hidden" name="isTop" value="0">
          <input type="hidden" name="state" value="1">
          <div class="clearfix "></div>
          <div class="col-md-12">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">标题：</label>
              <div class="col-md-12">
                <input id="bean-title" name="title" v-model="item.title" class="form-control" type="text"
                    placeholder="请输入标题" required="" aria-required="true" aria-describedby="bean-title-error"
                    maxlength="155" aria-invalid="true">
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">封面图：
                <button type="button" id="upload_btn_cover">点击上传</button>
              </label>
              <div class="col-md-12">
                <div id="upload_div_cover" style="">
                  <div class="img-grid-2">
                    <input name="cover" v-model="item.cover" type="hidden">
                    <img :src="item.cover||require('@/assets/images/noneImage.png')" onerror="loadinitimage()"
                        style="max-width:264px;max-height:264px">
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">内容：</label>
              <div class="col-md-12">
                <vue-ueditor-wrap :config="ueConfig" aria-describedby="bean-detailInfo-error" aria-invalid="true"
                    id="bean-detailInfo" name="detailInfo" placeholder="请输入内容" style="width: 100%;"
                    v-model="item.detailInfo"></vue-ueditor-wrap>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">投票选项：</label>
              <div class="col-md-12">
                <table class="table table-bordered table-striped  table-hover">
                  <thead>
                  <tr>
                    <th>选项值</th>
                    <th>顺序</th>
                    <th>
                      <a href="javascript:;" @click="addRow()" title="点击添加一行" rel="nofollow" class="label label-info"><i
                          class="fa fa-plus"></i></a>
                    </th>
                  </tr>
                  </thead>
                  <tbody id="childBody">
                  <tr v-if="item.optionsDto && item.optionsDto.length>0" v-for="(child, index) in item.optionsDto">
                    <td>
                      <input id="bean-child-title" name="childTitle" v-model="child.title" class="form-control" type="text"
                          placeholder="请输入选项值" required="" aria-required="true"
                          aria-describedby="bean-child-title-error"
                          maxlength="155" aria-invalid="true">
                    </td>
                    <td>
                      <input id="bean-child-orderNo" name="orderNo" v-model="child.orderNo" class="form-control"
                          type="text"
                          placeholder="请输入展示顺序" required="" aria-required="true"
                          aria-describedby="bean-child-orderNo-error"
                          maxlength="155" aria-invalid="true">
                    </td>
                    <td>
                      <input type="hidden" name="childId" v-model="child.id"/>
                      <input type="hidden" name="delFlag" value="0"/>
                      <a href="javascript:;" @click="delRow($event)" rel="nofollow"
                          class="label label-danger" :style="index == 0 ? 'display:none;' : ''"><i
                          class="fa fa-trash-o"></i> 删除</a>
                    </td>
                  </tr>
                  <tr v-if="item.optionsDto == null || item.optionsDto.length == 0">
                    <td>
                      <input id="bean-child-title" name="childTitle" class="form-control" type="text"
                          placeholder="请输入选项值" required="" aria-required="true"
                          aria-describedby="bean-child-title-error"
                          maxlength="155" aria-invalid="true">
                    </td>
                    <td>
                      <input id="bean-child-orderNo" name="orderNo" class="form-control"
                          type="text"
                          placeholder="请输入展示顺序" required="" aria-required="true"
                          aria-describedby="bean-child-orderNo-error"
                          maxlength="155" aria-invalid="true">
                    </td>
                    <td>
                      <input type="hidden" name="childId" value=""/>
                      <input type="hidden" name="delFlag" value="0"/>
                      <a href="javascript:;" @click="delRow($event)" rel="nofollow"
                          class="label label-danger" style="display: none"><i
                          class="fa fa-trash-o"></i> 删除</a>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import '@/assets/css/upload.css'
import VueUeditorWrap from 'vue-ueditor-wrap'
import {apiUtil, axiosContentType, site, ueConfig} from '@/assets/js/boss'
import '@/assets/js/upload_single_pic.js'

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: '',
      ueConfig: ueConfig
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#sysNewsForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.sysNewsPublicity.info + '/publicity');
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.sysNewsPublicity.info + '/publicity')) {
        that.info();
      }
    });
    window.upload_single_pic('upload_btn_cover', 'upload_div_cover', 'png,jpg,gif,bmp', 'cover');
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.sysNewsPublicity.info + sessionStorage.getItem(site.sysNewsPublicity.info + '/publicity'), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
          that.childs = that.item.optionsDto;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#sysNewsForm').valid()) {
        let childs = [];
        $('input[name=childId]').each(function () {
          let child = {};
          child.id = $(this).val();
          child.title = $(this).parent().parent().find('input[name=childTitle]').val();
          child.orderNo = $(this).parent().parent().find('input[name=orderNo]').val();
          child.delFlag = $(this).parent().parent().find('input[name=delFlag]').val();
          if (child.delFlag === '') {
            child.delFlag = 0;
          }
          childs.push(child);
        });
        that.item.optionsDto = childs;
        that.item.type = 7;
        that.item.isTop = 0;
        that.item.state = 1;
        axios.post(site.sysNewsPublicity.save, JSON.stringify(that.item),
            axiosContentType.json).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    addRow() {
      let tr = $('#childBody').find('tr').first().clone();
      $(tr).find('input').val('');
      $(tr).find('a').show();
      $('#childBody').append(tr);
    },
    delRow(event) {
      let obj = event.target;
      alert(obj);
      let id = $(obj).parent().parent().find('input[name=childId]').val();
      if (id === '') {
        $(obj).parent().parent().remove();
      } else {
        $(obj).parent().parent().find('input[name=delFlag]').val(1);
        $(obj).parent().parent().hide();
      }
    }
  }
}
</script>

